<template>
  <div>

<el-card v-if="isshow == true">
  <el-button @click="isshow = 'fasle'">添加文创产品</el-button>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="图片">
            <img :src="props.row.imglist" width="200px" alt="">
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label=" ID"
      prop="id">
    </el-table-column>
    <el-table-column
      label="产品名称"
      prop="title">
    </el-table-column>
<el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.row.id)"
          type="text"
          size="small">
          移除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</el-card>
<el-card v-else>
  <el-page-header @back="goBack" content="新增页面">
</el-page-header>
  <el-form ref="form" :model="addForm" label-width="80px">
  <el-form-item label="产品名字">
    <el-input v-model="addForm.productname"></el-input>
  </el-form-item>
   <el-form-item label="产品类型">
  <el-radio-group v-model="addForm.protype">
    <el-radio :label="1">东巴文具</el-radio>
    <el-radio :label="2">东巴饰品</el-radio>
    <el-radio :label="3">东巴摆件</el-radio>
    <el-radio :label="4">其他</el-radio>
  </el-radio-group>
  </el-form-item>
  <el-form-item label="产品介绍">
   <el-input
  v-model="addForm.price">
</el-input>
  </el-form-item>
  <el-form-item>
    <el-alert
                title="请上传一张图片"
                type="warning"
                center
                show-icon
                :closable="false"
              ></el-alert>
              <el-upload
                multiple
                list-type="picture"
                ref="upload"
                name="img"
                :limit="1"
                :action="uploadURL"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>

  </el-form-item>
   <el-form-item>
     <el-button type="success" @click="addformbtn">上传数据</el-button>
      </el-form-item>
  </el-form>
</el-card>
<el-dialog title="图片预览" :visible.sync="isshowPhoto" width="50%">
      <img :src="previewPath" alt="" width="100%" class="sphoto" />
    </el-dialog>
  </div>
</template>

<script>
import { setwccp,getwccp,deletewccp } from "network/request.js";

export default {
  created(){
this.getlist()
  },
data(){
  return {
    imgll:[],
     previewPath: "",
     isshowPhoto: false,
    isshow:true,
    tableData:[],
    addForm:{
      productname:'',
      price:'',
      protype:'',
    files: '',
    },
    uploadURL: "http://localhost:3001/upload",
  }
},
methods:{
  async deleteRow(id){
    console.log(id);
    const {data:res} = await deletewccp(id);
    console.log(res);
    this.getlist()
  },
  goBack(){
      this.isshow = true
  },
  async getlist(){
      const {data:res} = await getwccp()
      console.log(res);
      this.tableData = res
     
      console.log();
  },
  async addformbtn(){
      const res =await setwccp(this.addForm)
      if(res.status == 200){
        this.$message.success('新增民俗成功！')
        this.isshow = true
        this.addForm= {
      title:'',
      content:'',
    files: '',
    }
        this.getlist()
      }
  },
   // 处理图片预览效果
    handlePreview(file) {
      this.previewPath = file.response.path;
      console.log(file);

      this.isshowPhoto = true;
    },
     // 处理图片移除时操作
    handleRemove(file) {
      // 移除
      this.addForm.files= '';
    },
    // 监听图片上传成功事件
    handleSuccess(response) {
      // 先拼接得到一个图片信息对象
      console.log(response);
      const picInfo = response.path;
      // 将图片信息对象，push到pics数组中
      this.addForm.files=picInfo;
    }
}
}
</script>

<style lang="scss" scoped>

</style>